<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>文档的标题</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>


.whole_div {width: 980px;margin: 30px auto;border: 1px solid grey}

#account_div {cursor: pointer;width: 100%;height: 45px;line-height: 45px;text-align: center;border-right:1px solid lightgray}
#parent_ul {margin: 0 0;height: 410px;overflow-y: auto;background-color: lightgray}
#parent_ul li {width: 100%;list-style: none; height: 45px;vertical-align: middle;cursor: pointer;}
#parent_ul li:hover{width: 100%;list-style: none; height: 45px;vertical-align: middle; cursor: pointer;background-color:#d5eeee}
#parent_ul li a {width: 100%;margin: 20px 0}
.blank5 {width: 100%;height: 5px;}
.blank15 {width: 100%;height: 15px;}
.blank20 {width: 100%;height: 20px;}
.blank30 {width: 100%;height: 30px;}
.blank45 {width: 100%;height: 45px;}
.blank50 {width: 100%;height: 50px;}
.ordi_div {width: 100%;text-align: center}
#tab_ul {width: 50%;min-width: 720px;min-width: 1080px;height: 60px;margin: auto auto;}
.tab_ul_li_up {list-style-type: none; float: left; width: 49%;text-align: center;border: 1px solid lightgray;height: 50px;background-color:lightgrey;}
.tab_ul_li_down {list-style-type: none; float: left; width: 49%;text-align: center;border: 1px solid lightgray;border-bottom: 0; height: 50px;}
#get_div {width: 49%;min-width: 720px;min-width: 1080px;height: 60px;margin: auto auto;background-color: lightcoral;display: none;}
#donate_div {width: 49%;min-width: 720px;min-width: 1080px;height: 60px;margin: auto auto;background-color:lawngreen;overflow-y: auto;}
.headDivButton{text-align: center;font-size: 16px;font-weight: bold;line-height: 100%;padding-top: 10px;padding-bottom: 10px;border: 1px solid lightgray;background-color: lightsteelblue;cursor: pointer;}
.headDivButton:hover{background-color:#d5eeee;}



#get_textarea {width: 60%;height: 150px;font-family: monospace;font-size: 16px;margin: auto auto;}
#get_submit_button {width: 150px;height: 40px;font-family: monospace;font-size: 16px;margin: auto auto;}
</style>
<script src="./js/nebulas.js"></script>
<script src="./js/nebPay.js"></script>
<script src="./js/state.js"></script>
<script src="./js/qlib.js"></script>
<script src="./js/transfer.js"></script>
<script src="./js/viewEvent.js"></script>
<script src="./js/account.js"></script>
<script type="text/javascript">
    

    function gbid(id){
        return document.getElementById(id);
    }
    function setClassNameById(id, class_name){
        gbid(id).className = class_name;
    }
    function setOnclickFuncById(id, func){
        gbid(id).onclick = func;
    }


    window.onload = function(){
        viewInit();
        //$('#login_div').modal('show');
        //loginFunc(testJ);
    };
</script>
</head>

<body>
<div style="text-align: center"><img src="qpay.png" width="350px" alt=""></div>
<div class="whole_div" >
    <div class="row">
    <div class="col-md-3" >
    <div id="account_div" onclick="showMainDiv('user_info_div')"><span class="glyphicon glyphicon-user"></span> 账户</div>
    <div class="blank45" style="background-color: rgb(60, 139, 163)">
        <div class="row blank5"></div>
        <div class="row blank5"></div>
        <div class="row blank15">
            <div class="col-md-4"></div>
            <div class="col-md-7">
                <button onclick="showMainDiv('add_friend_div')">+添加朋友</button>
            </div>
        </div>

        <div class="row blank15"></div>
    </div>
    <ul class="list-group parent_ul" id="parent_ul">

       <!-- <li class="list-group-item li5"><span class="badge">新</span> aaa</li>-->

    </ul>
    </div>

    <div id="user_info_div" class="col-md-8 " style="height: 500px;display: none;">
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-5 headDivButton">账号信息</div>
            <div class="col-md-5 headDivButton" onclick="alert('即将开发完成，敬请期待！')">问答红包</div>
            <div class="col-md-1"></div>
        </div>
        <div class="row blank45"></div>
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-10">
                <div id="user_note_name" class="row" style="font-weight: bold;">林继强</div>
                <div id="user_id_number" class="row">QPay号：01000000</div>
                <div id="user_wallet_address" class="row">钱包地址：nfko4495ndll4592ndf4gh</div>
            </div>
        </div>
 
        <div class="row blank45"></div>
        <div class="row blank45"></div>
        <div class="row blank45"></div>
        <div class="row blank30">
            <div class="col-md-4"></div>
            <div class="col-md-4" style="height: 100%;"><button style="width: 100%;height: 100%;" id="user_info_button" onclick="userInfoButtonClick()">退出登录</button></div>
        </div>
        <div class="row blank45"></div>
        <div class="row blank30" style="text-align: center"><a target="blank" href="./help.html">帮助</a></div>
    </div>
    <div id="friend_info_div" class="col-md-8 " style="height: 500px;display: none;">
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-5 headDivButton">账号信息</div>
            <div class="col-md-5 headDivButton"  onclick="alert('即将开发完成，敬请期待！')">问答红包</div>
            <div class="col-md-1"></div>
        </div>
        <div class="row blank45"></div>
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-10">
                <div class="row" style="font-weight: bold;" id="f_note_name">林继强</div>
                <div class="row" id="f_id_number">QPay号：01000000</div>
                <div class="row" id="f_wallet_address">钱包地址：nfko4495ndll4592ndf4gh</div>
            </div>
        </div>
        <div class="row blank45"></div>
        <div class="row blank45"></div>

        <div class="row blank30">
            <div class="col-md-2"></div>
            <div class="col-md-2" style="text-align: right; line-height: 30px">转账(NAS): </div>
            <div class="col-md-6">
                <div class="input-group">
                    <input type="text" class="form-control" id="f_transfer_input">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" onclick="friendTransferConfirm()">确认</button>
                    </span>
                </div>
            </div>
            
        </div>
    </div>
    <div id="add_friend_div" class="col-md-8 " style="height: 500px;">
        <div class="row">

        </div>
        <div class="row blank45"></div>
        <div class="row blank30">
            <div class="col-md-2"></div>
            <div class="col-md-9">
                <div class="input-group">
                    <input type="text" class="form-control" id="af_input" value="QPay号/钱包地址" onfocus="input_focus(event, 'QPay号/钱包地址')" >
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" onclick="afFindFriendButtonClick()"><span class="glyphicon glyphicon-search"></span></button>
                    </span>
                </div>
            </div>
            
        </div>
        <div class="row blank45">
            <div class="col-md-4"></div>
            <div class="col-md-4" id="af_info_query_state"></div>
            <div class="col-md-4"></div>
        </div>
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-2"></div>
            <div class="col-md-8">
                <div class="row" style="font-weight: bold;" id="af_info_user_name">昵称：林继强</div>
                <div class="row" id="af_info_id_number">QPay号：01000000</div>
                <div class="row" id="af_info_wallet_address">钱包地址：nfko4495ndll4592ndf4gh</div>
            </div>
        </div>
        <div class="row blank45"></div>
        <div class="row blank30">
            <div class="col-md-2"></div>
            <div class="col-md-2" style="text-align: right; line-height: 30px; font-size: 15px">设置备注: </div>
            <div class="col-md-4">
                <input type="text" class="form-control" id="af_note_name_input">
            </div>
            <div class="col-md-2"><button class="btn btn-default" onclick="afAddFriendButtonClick()">添加好友</button></div>
        </div>
    </div>
    </div>
</div>
<div class="modal fade" id="login_div">
    <div class="modal-dialog" style="margin:100px auto">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row" style="text-align:center">根据浏览器插件钱包地址登陆账号</div>
                <div class="row blank45"></div>
                <div class="row">
                    <div class="col-md-3"></div>
                    <div class="col-md-6">
                        <div class="progress progress-striped active" >
                            <div id="login_info" class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;display:none;">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3"></div>
                </div>
                <div class="row">
                    <div class="col-md-5"></div>
                    <div class="col-md-2">
                        <button class="btn btn-default" id="login_button" onclick="loginButtonClick()">立即登陆</button>
                    </div>
                    <div class="col-md-5">
                    </div>
                </div>
                <div class="row" style="text-align:center"><a href="./register.html">注册</a></div>
            </div>
        </div>
    </div>
</div>
<div style="text-align: center">基于星云链<a href="https://nebulas.io/cn/">https://nebulas.io/cn/</a>,bug报告请在github上留言:<a href="https://github.com/newbee-town/QPay">https://github.com/newbee-town/QPay</a>,测试QPay账号:0</div>
</body>

</html>